<template>
    <view class="content">
		<Search />
        <view class="goods_type">
        	<view class="text" :class="item.id == goods_index? 'anc' : '' " 
				v-for="item in title" :key="item.id" @tap="goods_index = item.id">
        		{{item.name}}
        	</view>
        </view> 
		<scroll-view scroll-y class="goods_bottom" @scrolltolower="scrolltolower">
			<navigator class="bottom_commodity" v-for="item in goods_data" :key="item.goods_id" 
				:url="'../goods_detail/index?goods_id='+item.goods_id "
				open-type="navigate">
				<image :src=" item.goods_big_logo || '../../static/tads/empty.png' " mode=""></image>
				<view class="bottom_commodity_rigth">
					<view class="bottom_commodity_rigth_top">
						{{item.goods_name}}
					</view>
					<view class="bottom">
						{{item.goods_price}}
					</view>
				</view>
			</navigator>
			<view class="error" v-show="show">
				没有跟多数据了.....
			</view>
		</scroll-view>
    </view>
</template>
 
<script>
	import Search from '@/components/search/search'
    export default {
		components: {
			Search,
		},
        data() {
			return {
				title: [
					{
						id: 1,
						name: '综合'
					},
					{
						id: 2,
						name: '销量'
					},
					{
						id: 3,
						name: '价格'
					}
				],
				goods_index: 1,
				pagenum: 1,
				pagesize: 10,
				goods_data: [],
				show: false
			}
        },
        onLoad(options) {
			this.options = options
			this.get_goodsData()
        },
		
		onPullDownRefresh() {
			setTimeout(()=> {
				this.goods_data = []
				this.show = false
				this.pagenum = 1
				this.get_goodsData()
				uni.stopPullDownRefresh();
			}, 500);
		},
		
        methods: {
			get_goodsData() {
				if(this.show == true) return
				uni.showLoading({
				    title: '疯狂加载中...',
				});
				uni.request({
					url: 'https://api-hmugo-web.itheima.net/api/public/v1/goods/search',
					data: {
						cid: this.options.id,
						pagenum: this.pagenum,
						pagesize: this.pagesize
					}
				}).then(res=>{
					if(res[1].data.message.goods.length != 0) {
						this.goods_data = [...this.goods_data,...res[1].data.message.goods]
					}else {
						this.show = true
					}
					// 隐藏加载框
					uni.hideLoading();
				})
			},
			
			scrolltolower () {
				if(this.show == true) return
				this.pagenum++
				this.get_goodsData()
			}
        }
    }
</script>
 
<style lang="less" scoped>
.content {
	.goods_type {
		width: 750rpx;
		height: 88rpx;
		font-size: 30rpx;
		display: flex;
		line-height: 88rpx;
		justify-content: space-evenly;
		box-sizing: border-box;
		.text {
			text-align: center;
			width: 28%;
			&.anc {
				border-bottom: 4rpx solid #eb4a57;
				font-weight: bold;
			}
		}
	}
	.goods_bottom {
		width: 750rpx;
		height: calc(100vh - 100rpx - 88rpx);
		.bottom_commodity {
			padding: 10rpx 36rpx;
			display: flex;
			image {
				width: 190rpx;
				height: 190rpx;
				flex-shrink: 0;
			}
			.bottom_commodity_rigth {
				font-size: 24rpx;
				padding: 26rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.bottom_commodity_rigth_top {
					overflow : hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
				}
				.bottom {
					color: #eb4a57;
					&::before {
						content: "￥";
						padding-right: 10rpx;
					}
				}
			}
		}
		.error {
			text-align: center;
			font-size: 24rpx;
			padding: 10rpx 0;
			color: #afafaf;
		}
	}
}
</style>